<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog ref="elForm" :title="title" width="700px" append-to-body  @close="close" v-bind="$attrs" v-on="$listeners">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-select v-model="button" placeholder="请选择名称" clearable value-key="value" @change="selectButton" style="width: calc(100% - 100px)" filterable>
                    <template v-for="(button,index) in buttonList">
                        <el-option :label="button.name" :value="button"  :key="index"></el-option>
                    </template>
                </el-select>
                <el-button type="primary" size="mini" icon="el-icon-plus" style="margin-left: 10px" @click="toButtonList"></el-button>
            </el-form-item>
            <el-form-item label="请求方式" prop="method">
                <el-select v-model="form.method" placeholder="请选择请求方式" clearable style="width: 100%"  >
                    <el-option label="GET" :value="0"></el-option>
                    <el-option label="POST" :value="1"></el-option>
                    <el-option label="PUT" :value="2"></el-option>
                    <el-option label="DELETE" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="接口地址" prop="api">
                <el-autocomplete
                        v-model="form.api"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输接口地址"
                        @select="handleSelect" style="width: 100%"
                ></el-autocomplete>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="close">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import menu from "@/api/menuManagement/index";
    import buttons from "@/api/systemManagement/buttons/index";
    export default {
        name:"eidtButtonDialog",
        inheritAttrs: false,
        props: {
            row: {
                type: Object,
                default: function() {
                    return {};
                }
            },
        },
        data() {
            return {
                form:{
                    id: undefined,
                    name: undefined,
                    value:undefined,
                    remark: undefined,
                    method:0,
                    menu:this.$route.query.id*1,
                    api:""
                },
                // 表单校验
                rules: {
                    name: [
                        { required: true, message: "请选择名称", trigger: "blur" }
                    ],
                    method: [
                        { required: true, message: "请选择方法", trigger: "blur" }
                    ],
                    // api: [
                    //     { required: true, message: "请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/", trigger: "change" }
                    // ],
                },
                buttonList:[],
                button:[],
                apiList:[]
            }
        },
        computed: {
            title() {
                return this.row.id ? "修改" : "添加";
            }
        },
        created() {
            this.getList();
            this.initFormData();
            this.getUrls();
        },
        mounted() {},
        methods: {
            querySearchAsync(queryString, cb) {
                var results = queryString ? this.apiList.filter(this.createStateFilter(queryString)) : this.apiList;
                results = results.map(item=>{
                    return {value:item}
                });
                cb(results);
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.toLowerCase().indexOf(queryString.toLowerCase()) !=-1);
                };
            },
            handleSelect(item) {
                //console.log(item);
            },
            getUrls(){
              menu.getUrls().then(res=>{
                  this.apiList = res.data.urls;
              })
            },
            toButtonList(){
                this.$router.push({ path: `/systemManagement/buttons`});
            },
            selectButton(){
              this.form.name = this.button.name
              this.form.value = this.button.value
            },
            getList(){
                buttons.getList({per_page:1000,page:1}).then(response => {
                    this.buttonList = response.data.value;
                });
            },
            initFormData() {
                if (this.row.id) {
                    for (let o in this.form) {
                        this.form[o] = this.row[o];
                    }
                }
                //console.log("this.form",this.form)
                this.button = {name:this.form["name"],value:this.form.value}
            },
            onOpen() {},
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.$emit('update:visible', false)
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    this.close()
                })
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            menu.editMenuButton(this.form.id,this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.$emit("reloadList")
                                this.close()
                            });
                        } else {
                            menu.addMenuButton(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.$emit("reloadList")
                                this.close()
                            });
                        }
                    }
                });
            },
        }
    }

</script>
<style>
</style>
